<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>upx download</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #btn-start{
            background-color: #00a1d6;
            color: white;
            font-size: 16px;
            outline: none;
            border:none;
            padding: 8px 15px;
            border-radius: 5px;

        }
        #image-list div{
            display: inline-block;
            width: 30vw;
            height: 30vw;
            margin-left:2.5vw;
            margin-top:2.5vw;
        }
        #image-list img{
            display: inline-block;
            width: 30vw;
            height: 30vw;
            object-fit: contain;
            object-position: center;
            background-color: #efefef;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td rowspan="4">
                <input type="file" id="fileIn">
                <textarea name="" id="urls-input" cols="30" rows="10"></textarea>
            </td>
            <td>
                总数：<span id="c-total"></span>
            </td>
        </tr>
        <tr>
            <td>
                成功：<span id="c-success"></span>
            </td>
        </tr>
        <tr>
            <td>
                失败：<span id="c-fail"></span>
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn" id="btn-start">start</button>
                <button class="btn" id="btn-addError">add Error</button>
            </td>
        </tr>
    </table>
    <div id="image-list">

    </div>
    
    <script>
        
        var fetchIng = false;
        var urlsInput = document.getElementById('urls-input');
        var btnStrat = document.getElementById('btn-start');
        var btnAddError = document.getElementById('btn-addError');
        var cTotal = document.getElementById('c-total');
        var cSuccess = document.getElementById('c-success');
        var cFail = document.getElementById('c-fail');
        var imageList = document.getElementById('image-list');

        btnStrat.addEventListener('click',function(){
            
            var urls = (new Function('return '+urlsInput.value))();
            cTotal.innerText = urls.list.length;
            var list = [];
            for(var i in urls.list){
                var item = urls.list[i];
                for(var j in item) {
                    list.push(j);
                }
            }
            var distList = [];
            for(var i in list) {
                distList.push({
                    url: list[i],
                    index: i
                })
            }
            window.list = distList;
            window.toFecthList = JSON.parse(JSON.stringify(distList));
            window.successList = [];
            window.failList = [];
            console.log(urls);
            if(fetchIng) {
                alert('正在获取中···');
            } else {
                fetchIng = true;
                fetchData();
                document.title = urls.tags;
            }
        })
        btnAddError.addEventListener('click', function() {
            if(window.failList.length > 0) {
                window.toFecthList = window.failList.concat(window.toFecthList);
                window.failList = []; 
                fetchData();
                setCount();
            } else {
                alert('无失败条目');
            }
        })

        function fetchData() {
            if(window.toFecthList.length > 0) {
                (function(){
                    var item = window.toFecthList.shift();
                    console.log(item);
                    console.log(toFecthList);
                    var url = item.url;
                    var index = item.index;
                    var node = document.getElementById('img'+ index);
                    if(!node) {
                        node = document.createElement('div');
                        node.setAttribute('id', 'img'+ index);
                        imageList.appendChild(node);
                    }
                    var image = new Image();
                    image.src = url;
                   
                    image.onload = function() {
                        node.appendChild(image);
                        /* var a = document.createElement('a');
                        var urlSplit = url.split('/') || [];
                        var filename = urlSplit[urlSplit.length - 1];
                        a.href = url;
                        a.target = '_blank';
                        console.log('filename', filename);
                        a.download = filename;
                        document.body.appendChild(a);
                        a.innerText = 'now:'+Date.now();
                        a.click(); */
                        setTimeout(function(){
                            window.successList.push({url: url,index: index});
                            setCount();
                            fetchData();
                        }, 1000);
                    }
                    image.onerror = function() {
                        window.failList.push({url: url, index: index});
                        fetchData();
                        setCount();
                    }
                })()

            } else {
                alert('toFetchList 为0');
                // fetchIng = false;
            }
        }
        function setCount() {
            cSuccess.innerText = successList.length;
            cFail.innerText = failList.length;
        }




        var fileIn = document.getElementById('fileIn')
        fileIn.onchange = function(e) {
            console.log(e.target.files);
            var files = e.target.files;
            if(files[0]) {
                var file = new FileReader();
                file.readAsText(files[0]);
                file.onload = function (r) {
                    urlsInput.value = file.result;
                }
            }
        }
    </script>
</body>
</html>